import React from 'react';
import { Layout, Menu, Icon } from 'antd';
import './style.css'
import Tables from './table'
import Add from './add'
import { Route, Link } from 'react-router-dom'
const { Sider, Content } = Layout;

export default class Tab extends React.Component {
  state = {
    collapsed: false,
  };

  toggle = () => {
    this.setState({
      collapsed: !this.state.collapsed,
    });
  };

  render() {
    return (
      
      <Layout style={{ marginTop: 10 }}>
        <Sider className="sider" trigger={null} collapsible collapsed={this.state.collapsed}>
          <div className="logo" />
          <Menu theme="dark" mode="inline" defaultSelectedKeys={['1']}>
            <Menu.Item key="1">
              <Icon type="user" />
              <span><Link to="/main">班级管理</Link></span>
            </Menu.Item>
            <Menu.Item key="2">
              <Icon type="video-camera" />
              <span>学生管理</span>
            </Menu.Item>
            <Menu.Item key="3">
              <Icon type="upload" />
              <span>设置</span>
            </Menu.Item>
          </Menu>
        </Sider>
        <Layout>
          <Icon
            style={{ marginLeft: '-97%', marginTop: 15 }}
            className="trigger"
            type={this.state.collapsed ? 'menu-unfold' : 'menu-fold'}
            onClick={this.toggle}
          />
          <Content
            style={{
              margin: '24px 16px',
              padding: 24,
              background: '#fff',
              minHeight: 280,
            }}
          >
            <Add />
            <br/> 
            <Route path="/main" component={Tables} />
          </Content>
        </Layout>
      </Layout>
    );
  }
}